﻿@{
    ViewData["Title"] = "角色菜单配置";
    Layout = "~/Views/Shared/_LayuiTable.cshtml";
}
<script type="text/html" id="isEnableTpl">
    {{#  if(d.IsEnable == true ){ }}
    启用
    {{#  } else { }}
    禁用
    {{#  } }}
</script>
<script type="text/html" id="isApiTpl">
    {{#  if(d.IsApi == true ){ }}
    <span style="color: #F581B1;">是</span>
    {{#  } else { }}
    否
    {{#  } }}
</script>
<script type="text/html" id="isExpandTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="IsExpand" value="true" RoleMenuId="{{d.Id}}" lay-skin="switch" lay-text="展开|折叠" lay-filter="IsExpandEvent" {{ d.IsExpand ? 'checked' : '' }}>
</script>
<div style="padding:0px 0px 5px 0px;">
    <button class="layui-btn" onclick="openAll(false)">折叠全部</button>
    <button class="layui-btn" onclick="openAll(true)">展开全部</button>
    <button class="layui-btn" onclick="tableReload()">刷新</button>
</div>
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
<script>
    layui.config({
        base: '../layuiadmin/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid'
    });
    addLayuiApp("treeGrid");

    var treeGrid = null, tableId = 'treeTable', layer = null;    
    addLayuiUseEvent(function () {
        treeGrid = layui.treeGrid;//很重要
        layer = layui.layer;
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , idField: 'MenuId'
            , url: '/api/apirole/GetRoleMenus'
            , where: {Id:"@ViewBag.RoleId"}
            , method: 'post'
            , cellMinWidth: 100
            , treeId: 'MenuId' //树形id字段名称
            , treeUpId: 'MenuPId' //树形父id字段名称
            , treeShowName: 'MenuName' //以树形式显示的字段
            , isOpenDefault: false //节点默认是展开还是折叠【默认展开】
            , iconOpen: false //是否显示图标【默认显示】
            , cols: [[
                { type: 'numbers' }
                , { field: 'MenuName', width: 250, title: '菜单名称' } //edit: 'text', 开启编辑
                , { field: 'MenuUrl', width: 180, title: '菜单地址' }
                , { field: 'MenuIcon', width: 150, title: '图标' }
                , { field: 'MenuOrder', width: 80, edit: 'text', align: 'center', title: '排序' }
                , { field: 'IsApi', width: 90, title: '数据接口', align: 'center', templet: '#isApiTpl', unresize: true }
                , { field: 'MenuExpand', width: 90, title: '是否展开', align: 'center', templet: '#isExpandTpl', unresize: true }
                //, { field: 'IsEnable', width: 90, title: '是否启用', templet: '#isExpandTpl', unresize: true }
            ]]
            , isPage: false
            , page: false
            , limit: 0
        });
        
        var form = layui.form;
        treeGrid.on('edit(' + tableId + ')', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            if (field == "MenuOrder") {
                updateOrderNo(data.Id, value);
            }
        });

        //监听操作
        form.on('switch(IsExpandEvent)', function (obj) {
            var switchState = obj.elem.checked ;
            var roleMenuId = $(obj.elem).attr("RoleMenuId");
            jqJsonPost("/api/apirole/UpdateIsExpand",
                { RoleMenuId : roleMenuId,IsExpand:switchState},
                function (data) {

                    if (data.code == 0) {
                        layer.tips("设置成功", obj.othis);
                    } else {
                        layer.tips(data.msg, obj.othis);
                    }
                });
        });
    });

    //展开或折叠全部
    function openAll(isOpen) {
        treeGrid.treeOpenAll(tableId, isOpen);
    }

    //重载
    function tableReload() {
        treeGrid.reload(tableId, {
            page: {
                curr: 0
            }
        });
    }

    //更新菜单排序
    function updateOrderNo(id,orderNo) {
        jqJsonPost("/api/apirole/updateMenuOrder",
            { RoleMenuId: id, OrderNo: orderNo },
            function (data) {
                layer.msg(data.msg);
                if (data.code == 0) {
                    //tableReload();
                }
            });
    }

    //更新是否展开
    function updateIsExpand(id, isExpand) {
        jqJsonPost("/api/apirole/updateIsExpand",
            { RoleMenuId: id, OrderNo: orderNo },
            function (data) {
                layer.msg(data.msg);
                if (data.code == 0) {
                    //tableReload();
                }
            });
    }

</script>